<template>
  <div class="box">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item
        v-for="(item, index) in $route.path.split('/')"
        :key="index"
      >
        {{ dir[item] }}
      </el-breadcrumb-item>
    </el-breadcrumb>

    <div class="main">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="试卷名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="考试类型" prop="examType">
          <el-select v-model="ruleForm.examType" placeholder="选择考试类型">
            <el-option
              v-for="item in examType"
              :label="item.exam_name"
              :value="item.exam_id"
              :key="item.exam_id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择课程" prop="examSubject">
          <el-select v-model="ruleForm.examSubject" placeholder="选择课程">
            <el-option
              v-for="item in examSubject"
              :label="item.subject_text"
              :value="item.subject_id"
              :key="item.subject_id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="设置题量" prop="num">
          <el-input-number
            v-model="ruleForm.num"
            :min="1"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="考试时间" prop="date1">
          <el-date-picker
            v-model="ruleForm.date1"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间" prop="date2">
          <el-date-picker
            v-model="ruleForm.date2"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import dir from "@/utils/code";
import rules from "./rules";
import { getExamType, getSubject } from "@/api/exam";
export default {
  data() {
    return {
      dir,
      ruleForm: {
        name: "",
        examType: "",
        date1: "",
        date2: "",
        num: 1,
      },
      rules: Object.freeze(rules),
      examType: [],
      examSubject: [],
    };
  },
  async created() {
    let list = await getExamType();
    this.examType = list.data;

    let list2 = await getSubject();
    this.examSubject = list2.data;
    console.log(list2);
  },
  methods: {
    submitForm(formName) {
      console.log(this.ruleForm)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let date1 = new Date(this.ruleForm.date1)
          let time = date1.getTime()
          console.log(time)
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.box {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: auto;
  background: #fff;
  min-height: 0;
}

.main {
  margin-top: 30px;
}
</style>